import React from 'react';
import useScreenSize from '@site/src/hooks/useScreenSize';
import BrowserOnly from '@docusaurus/BrowserOnly';

function PlanetsIconDark() {
  const { windowWidth } = useScreenSize();

  return (
    <BrowserOnly>
      {() => (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width={
            windowWidth *
            (windowWidth < 768 ? 0.6 : windowWidth > 2400 ? 0.35 : 0.4)
          }
          fill="none"
          viewBox="0 0 617 600">
          <path
            fill="#ABBCF5"
            d="M386.5 196c47.696 0 86.5 38.804 86.5 86.5S434.196 369 386.5 369 300 330.196 300 282.5s38.804-86.5 86.5-86.5zm0 1.768c-46.721 0-84.737 38.011-84.737 84.737 0 46.721 38.011 84.737 84.737 84.737 46.721 0 84.737-38.01 84.737-84.737 0-46.726-38.011-84.737-84.737-84.737z"></path>
          <path
            fill="#ABBCF5"
            d="M237.661 198.753c28.978-28.938 67.505-44.876 108.491-44.876 40.981 0 79.508 15.938 108.49 44.876 28.978 28.938 44.938 67.416 44.938 108.341 0 40.924-15.96 79.398-44.938 108.34-28.977 28.938-67.509 44.876-108.49 44.876-40.982 0-79.509-15.938-108.491-44.876-28.978-28.937-44.938-67.416-44.938-108.34 0-40.925 15.96-79.403 44.938-108.341zm108.487-43.459c-83.816 0-152.006 68.096-152.006 151.795 0 83.7 68.19 151.796 152.006 151.796 83.815 0 152.005-68.096 152.005-151.796 0-83.699-68.19-151.795-152.005-151.795z"></path>
          <path
            fill="#ABBCF5"
            d="M170.795 200.195c10.421-24.611 25.346-46.71 44.349-65.69 19.007-18.981 41.14-33.881 65.781-44.288 25.514-10.779 52.618-16.243 80.557-16.243 27.938 0 55.038 5.464 80.556 16.242 24.645 10.408 46.774 25.312 65.781 44.289 19.007 18.98 33.928 41.083 44.35 65.69 10.793 25.479 16.265 52.545 16.265 80.445 0 27.9-5.472 54.966-16.265 80.445-10.422 24.611-25.347 46.709-44.35 65.69-19.007 18.981-41.14 33.881-65.781 44.288-25.514 10.779-52.618 16.243-80.556 16.243-27.939 0-55.039-5.464-80.557-16.243-24.645-10.407-46.774-25.311-65.781-44.288-19.007-18.981-33.928-41.079-44.349-65.69-10.794-25.479-16.265-52.545-16.265-80.445 0-27.9 5.471-54.966 16.265-80.445zM361.482 75.391c-113.332 0-205.533 92.073-205.533 205.249 0 113.175 92.201 205.249 205.533 205.249s205.533-92.074 205.533-205.249c0-113.176-92.201-205.249-205.533-205.249z"></path>
          <circle
            cx="245.655"
            cy="195.655"
            r="34.655"
            fill="#D1BBF3"
            opacity="0.7"
            transform="rotate(90 245.655 195.655)"></circle>
          <path
            fill="#782AEB"
            d="M245.655 221.823c-14.452 0-26.168-11.716-26.168-26.168s11.716-26.168 26.168-26.168 26.168 11.716 26.168 26.168-11.716 26.168-26.168 26.168z"></path>
          <mask
            id="mask0_254_3135"
            style={{ maskType: 'alpha' }}
            width="53"
            height="53"
            x="219"
            y="169"
            maskUnits="userSpaceOnUse">
            <path
              fill="#782AEB"
              d="M245.654 221.824c-14.452 0-26.168-11.716-26.168-26.168s11.716-26.168 26.168-26.168 26.168 11.716 26.168 26.168-11.716 26.168-26.168 26.168z"></path>
          </mask>
          <g fill="#B07EFF" mask="url(#mask0_254_3135)">
            <path d="M254.95 171.237c5.066-1.49-13.709-11.324-16.093-13.41l-19.371 23.543c3.279 4.37 11.742 12.814 19.371 11.622 9.537-1.49-6.854-9.536-5.662-15.497 1.192-5.96 15.497 14.007 27.715 15.497 12.219 1.49-14.006-14.603-18.775-21.755-4.768-7.152 7.749 1.49 12.815 0z"></path>
            <path d="M222.074 179.591c2.384 2.086 18.933 10.245 13.867 11.735-5.066 1.49-15.357-5.476-10.589 1.676 4.768 7.152 18.186 14.894 5.968 13.404-3.312-.404-5.154-.779-6.111-1.083-4.156 4.004 6.297 7.96-3.135 9.434-7.629 1.192-16.093-7.252-19.371-11.623l19.371-23.543zM237.172 224.206c-5.066 1.49 13.709 11.324 16.093 13.41l25.727-29.994c-3.278-4.371-2.1-10.435-9.729-9.243-9.536 1.49-1.155 7.297-7.783 9.243-5.832 1.712-14.864-10.154-16.296-2.676-1.432 7.479.339 14.252 5.107 21.404 4.769 7.153-8.052-3.634-13.119-2.144z"></path>
          </g>
          <path
            stroke="#D1BBF3"
            strokeLinecap="round"
            strokeWidth="5"
            d="M264.5 216c18.526 28.144-3.845 18.047-7.531 14.704-7.533-6.832-24.78-18.427-39.19-54.59-8.535-21.42-1.497-17.852 9.98-3.092"></path>
          <circle
            cx="389.928"
            cy="283.394"
            r="66.173"
            fill="#D1BBF3"
            opacity="0.7"
            transform="rotate(60 389.928 283.394)"></circle>
          <path
            fill="#782AEB"
            d="M414.913 326.665c-23.899 13.798-54.459 5.61-68.257-18.289-13.798-23.899-5.61-54.459 18.289-68.257 23.899-13.798 54.459-5.609 68.257 18.289 13.798 23.899 5.61 54.459-18.289 68.257z"></path>
          <mask
            id="mask1_254_3135"
            style={{ maskType: 'alpha' }}
            width="101"
            height="101"
            x="339"
            y="233"
            maskUnits="userSpaceOnUse">
            <path
              fill="#782AEB"
              d="M414.91 326.671c-23.899 13.798-54.458 5.609-68.256-18.29-13.798-23.899-5.61-54.458 18.289-68.256 23.899-13.798 54.458-5.61 68.257 18.289 13.798 23.899 5.609 54.458-18.29 68.257z"></path>
          </mask>
          <g fill="#B07EFF" mask="url(#mask1_254_3135)">
            <path d="M381.986 234.145c6.955-7.301-33.482-5.639-39.416-6.812l-9.555 57.426c9.594 4.098 31.651 9.98 43.129.725 14.347-11.569-20.439-9.226-24.159-20.22-3.719-10.994 38.999 8.367 60.627-.835 21.628-9.201-37.104-10.775-51.817-18.05-14.714-7.275 14.235-4.933 21.191-12.234z"></path>
            <path d="M335.598 279.344c5.934 1.174 41.089-1.135 34.134 6.166-6.955 7.301-30.623 5.606-15.91 12.881 14.713 7.275 44.293 7.267 22.665 16.468-5.862 2.494-9.266 3.633-11.139 4.043-3.049 10.589 18.013 7.152 3.823 18.594-11.478 9.255-33.535 3.372-43.129-.726l9.556-57.426zM403.158 338.707c-6.955 7.301 33.481 5.639 39.415 6.813l13.907-74.163c-9.594-4.098-13.435-15.25-24.913-5.995-14.347 11.568 5.057 13.169-4.047 22.715-8.009 8.399-34.274-2.6-29.502 11.134 4.772 13.734 14.168 23.243 28.882 30.518 14.713 7.275-16.787 1.678-23.742 8.978z"></path>
          </g>
          <path
            fill="#ABBCF5"
            d="M67.047 0H65.23a448.863 448.863 0 00-2.049 4.764c-22.35 52.82-33.68 108.933-33.68 166.772 0 57.844 11.33 113.961 33.68 166.78 21.585 51.022 52.482 96.841 91.835 136.195 39.362 39.35 85.194 70.236 136.222 91.816C344.073 588.673 400.197 600 458.052 600c54.992 0 108.422-10.231 158.948-30.443v-1.78c-49.153 19.777-102.802 30.675-158.948 30.675-235.449 0-427.002-191.51-427.002-426.916C31.05 110.556 43.9 52.52 67.047 0z"></path>
        </svg>
      )}
    </BrowserOnly>
  );
}

export default PlanetsIconDark;
